<template>
	<div class="detail4">
		<h2 class="tit">预约挂号详情</h2>
		<div class="main">
			<p class="title">预约挂号信息</p>
			<Row class="box">					
				<Col span="8">
					<div class="address">						
						<span class="s1">HIS挂号单号:</span>
						<span>{{appoint.regReciptId}}</span>					
					</div>
					<div class="address">					
						<span class="s1">挂号医生:</span>
						<span>{{appoint.doctorName}}</span>			
					</div>
					<div class="address">						
						<span class="s1">就诊人:</span>
						<span>{{appoint.memberName}}</span>					
					</div>
				</Col>  
				<Col span="8">
					<div class="address">						
						<span class="s1">性别:</span>
						<span>{{["女", "男"][appoint.gender]}}</span>					
					</div>
					<div class="address">					
						<span class="s1">年龄:</span>
						<span>{{appoint.age}}</span>			
					</div>
					<div class="address">						
						<span class="s1">手机号:</span>
						<span>{{appoint.memberPhone}}</span>					
					</div>
				</Col>  
				<Col span="8">
					<div class="address">						
						<span class="s1">出诊机构:</span>
						<span>{{appoint.hospitalName}}</span>
					</div>				
					<div class="address">						
						<span class="s1">医师服务费:</span>
						<span>{{appoint.registrationFee}}</span>
					</div>
					<div class="address">
						<span class="s1">预约时段:</span>
						<span>{{appoint.timeRange}}</span>				
					</div>
				</Col>
				<Col span="8">
					<div class="address">						
						<span class="s1">挂号科室:</span>
						<span>{{appoint.department}}</span>		
					</div>
					<div class="address">					
						<span class="s1">科室区域:</span>
						<span>{{appoint.sectionArea}}</span>				
					</div>
					<div class="address">				
						<span class="s1">预约日期:</span>
						<span>{{appoint.appointmentTime}}</span>	
					</div>
				</Col>
				<Col span="8">
					<div class="address">						
						<span class="s1">就诊状态:</span>
						<span>{{handleIvisit(appoint.ivisit)}}</span>		
					</div>
				</Col>
			</Row>
		</div>
		<div class="main">
			<p class="title">订单信息</p>
			<Row class="box">					
				<Col span="8">
					<div class="address">
						<span class="s1">订单状态:</span>
						<span>{{["待付款", "已付款", "已取消", "已退款", "支付中", "支付失败", "退款中", "部分退款"][info.orderStatus]}}</span>		
					</div>
					<div class="address" v-if="info.orderNumber">			
						<span class="s1">订单编号:</span>
						<span>{{info.orderNumber}}</span>
					</div>
				</Col>
				<Col span="8">
					<div class="address">
						<span class="s1">订单金额:</span>
						<span>{{info.amt}}</span>	
					</div>
					<div class="address">
						<span class="s1">三方平台业务单号:</span>
						<span>{{info.transactionId}}</span>
					</div>
				</Col>
				<Col span="8"  v-if="info.createTime">
					<div class="address">
						<span class="s1">订单时间:</span>
						<span>{{info.createTime}}</span>	
					</div>
				</Col>
				<Col span="8"  v-if="info.notifyTime">
					<div class="address">
						<span class="s1">支付完成时间:</span>
						<span>{{info.notifyTime}}</span>	
					</div>
				</Col>
			</Row>
		</div>
		<div class="btn-group">
			<feeBackBtn :id="$route.query.id" :feeBackInfo="{
			refundAmt: info.refundAmt,
			refundTradingChannels: info.refundTradingChannels,
			refundOrderStatus: info.refundOrderStatus}" />
			<Button @click="handleBack">
				<i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>返回
			</Button>
		</div>
	</div>
</template>

<script>
import feeBackBtn from './components/feeBackBtn';
import api from "@/api/commonApi";
export default {
	name: '预约挂号退费详情',
	components: {
		feeBackBtn
	},
	data() {
		return {
			info: {},
			appoint:{},
		    ivisitList: [
			  {"dictValue": -1, "dictName": "待支付"},
			  {"dictValue": 0, "dictName": "即将就诊"},
			  {"dictValue": 1, "dictName": "已退诊"},
			  {"dictValue": 2, "dictName": "已完成"},
			  {"dictValue": 3, "dictName": "未就诊(爽约)"},
			  {"dictValue": 4, "dictName": "已报到"},
			  {"dictValue": 5, "dictName": "已取号"},
			  {"dictValue": 6, "dictName": "已取消"}
			],
		}
	},
	mounted() {
		this.orderPrescription();
		this.orderDetail();
	},
	methods: {
		orderPrescription() {
			this.$axios.get(api.orderAppointment + '/' + this.$route.query.orderId).then(resp => {
				this.appoint = resp.data.object;
				this.appoint.timeRange = resp.data.object.timeStart + '-' + resp.data.object.timeEnd;
			}).catch(err => {
			});
		},
		orderDetail() {
			this.$axios.get(api.orderById + '/' + this.$route.query.orderId).then(resp => {
				this.info = resp.data.object;
			}).catch(err => {
			});
		},
		handleIvisit(ivisit){
			return (
              this.ivisitList.filter(
                (item) => item.dictValue == ivisit)[0] || {}
            ).dictName;
		},
		handleBack() {
			this.$router.go(-1);
		},
	}
}
</script>

<style scoped lang="less">
.detail4 {
	width: calc(100%);
	padding: 10px 0px;
	margin: 0 auto;
	background: #fff;
	.tit {
		margin:10px 0;
		font-weight:bold;
		text-align:center;
	}	
	.main {
		width: 98%;
		display: flex;
		flex-direction: column;
		margin: 10px auto;
		border: 1px solid #f0f0f0;
		box-shadow: 0 4px 3px #ebedf8;
		border-radius: 5px;
		margin-bottom: 20px;
		.title {
			font-size: 20px;
			padding-left: 15px;
			margin-bottom: 20px;
			color: #333;
			height: 40px;
			line-height: 40px;
			background: #ebedf8;         
    	}
		.box{
			padding: 0 40px;
		}
		.address {
			display: flex;
			flex-direction: row;    
			.s1 {
				min-width: 80px;
				margin-right: 10px;
				margin-bottom: 15px;
			}
		}
	}
	.btn-group {
		margin-top: 20px;
		text-align: center;
		margin-bottom: 10px;
	}
}
</style>